<template>
  <div>
    <div class="flexrowbetween flexwrapper" style="align-items: flex-start">
      <div class="flex aligncenter">
        <div
          class="iconbox flexcenter commhover blackbg mr_15"
          @click="resetQuery"
        >
          <i class="el-icon-refresh f-20" :class="{ rotate: isrefresh }"></i>
        </div>
        <el-button type="primary" plain size="small" :disabled='multiple' @click="openDraw">指定中奖</el-button>
        <el-button type="primary" plain size="small" @click="handleFabu">预览</el-button>
        <div>【{{ row.name }}】的用户列表</div>
      </div>
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="0"
      >
        <el-form-item prop="keyword">
          <el-input
            class="searchinput"
            v-model="queryParams.keyword"
            placeholder="请输入兑奖码"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-dropdown trigger="click" @command="handleCommand">
            <el-button size="mini" class="nol_border plr_9">
              <svg-icon class-name="f-14" icon-class="export" />
              <i class="el-icon-caret-bottom el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, index) in exportlist"
                :key="index"
                :command="item.id"
                >{{ item.name }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item>
          <el-button
            class="f-14"
            type=""
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          ></el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      ref="tablelayout"
      class="commtable"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="ID" prop="id" align="center" width="80" />
      <el-table-column label="Unionid" prop="platName" align="center">
        <template slot-scope="scope">
          {{ scope.row.wxuser.wxid || "-" }}
        </template>
      </el-table-column>
      <el-table-column label="头像" align="center">
        <template slot-scope="scope">
          <img v-if="scope.row.wxuser.photo" :src="scope.row.wxuser.photo" alt="" class="imgmini">
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="昵称" prop="wxuser.name" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.wxuser.name || '-'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="兑奖码" prop="code" align="center" />
      <el-table-column
        prop="created_at"
        label="操作"
        width="120"
        fixed="right"
        align="center"
      >
        <template slot-scope="scope">
          <div class="flex btnflex">
            <div
              class="commhover btn_yellow mr_10 c_fff"
              @click="handleEdit(scope.row)"
            >
              <i class="el-icon-edit-outline f-14"></i>编辑
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.num"
      @pagination="getList"
    />
    <el-dialog
      title="预览"
      :visible.sync="dialogVisible"
      width="680px"
      class="dialogheaderbg"
      :before-close="handleClose"
      append-to-body
      :close-on-click-modal='false'
    >
      <time-yulan v-if="dialogVisible" :rowid="row.id" @close="handleClose" />
    </el-dialog>

    <!-- 指定开奖 -->
    <el-dialog
      class="dialogheaderbg"
      :title="title"
      :visible.sync="open"
      width="680px"
      append-to-body
      :close-on-click-modal='false'
      :before-close="handleCloseOpen">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="兑奖码：" prop="code_id" v-if="typeOpen==1">
          <el-select v-model="form.code_id" multiple placeholder="请选择兑奖码">
            <el-option v-for="(item,index) in rowids" :key="index" :label="item.code" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="指定中奖：" prop="status">
          <el-switch v-model="form.status" :inactive-value="0" :active-value="1"></el-switch>
        </el-form-item>
        <el-form-item label="奖项设置：" prop="level">
          <el-select v-model="form.level" placeholder="请选择奖项设置">
            <el-option v-for="(item,index) in drawList" :key="index" :label="item.draw_name" :value="item.level" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注：" prop="remak">
          <el-input v-model="form.remak" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="handleCloseOpen">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { timeDrawIndex,timeDrawList,timeDraw,drawList } from "@/api/active";
import { drawPoolIndex } from '@/api/sethome'
import TimeYulan from './TimeYulan.vue'
import { getMemberToken } from "@/api/member";

export default {
  data() {
    return {
      queryParams: {
        page: 1,
        num: 10,
        id: "",
        keyword: undefined,
      },
      total: 1,
      loading: false,
      rowids: [],
      multiple: true,
      tableData: [],
      isrefresh: false,
      dialogVisible: false,

      // 日志
      dialoglogVisible: false,
      rowId: "",

      // 预览
      dialogView: false,
      timeopen: false,

      codeList:[],
      drawList:[],
      open:false,
      title:'',
      form:{
        id:'',
        code_id:[],
        status:1,
        level:''
      },
      rules:{
        code_id:[{ required: true, message: '请选择中奖码', trigger: 'change' }],
        level:[{ required: true, message: '请选择奖项设置', trigger: 'change' }],
      },
      typeOpen:'',
      myrow:null
    };
  },

  props: {
    type: {
      type: Number,
      default: 1,
    },
    row: {
      type: Object,
      default: {},
    },
  },

  components:{
    TimeYulan
  },

  created() {
    this.queryParams.id = this.row.id;
    this.getList();
  },

  methods: {
    getList() {
      this.loading = true;
      let params = {
        page: this.queryParams.page,
        num: this.queryParams.num,
        id: this.queryParams.id,
      };
      if (this.queryParams.keyword) {
        params.keyword = this.queryParams.keyword;
      }
      timeDrawIndex(params).then((response) => {
        this.tableData = response.data.list;
        this.total = response.data.count;
        this.loading = false;
        this.isrefresh = false;
      });
    },

    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },

    resetQuery() {
      this.isrefresh = true;
      this.resetForm("queryForm");
      this.handleQuery();
    },

    handleSelectionChange(selection) {
      this.rowids = selection.map((item) => ({id:item.id,code:item.code}));
      this.multiple = !selection.length;
    },

    getDrawList(){
      drawList({id:this.row.id}).then(res=>{
        this.drawList = res.data
      })
    },

    openDraw(){
      this.getDrawList()
      this.title = '批量指定中奖'
      this.typeOpen = 1
      this.form.code_id = this.rowids.map(item=>item.id)
      this.form.id = this.row.id
      // this.form.level = 1
      this.open = true
    },

    handleCloseOpen(){
      this.open = false
    },

     handleEdit(row) {
      this.getDrawList()
      this.title = '编辑开奖设置'
      this.typeOpen = 2
      this.myrow = row
      this.form.id = row.id
      // this.form.level = row.level
      this.open = true
    },

    submitForm(){
      this.$refs.form.validate(valid=>{
        if(!valid) return
        if(this.typeOpen == 1){
          timeDrawList(this.form).then(res=>{
            this.$message.success('设置成功')
            this.handleCloseOpen()
          })
        }else{
          let params = {
            code_id:this.myrow.id,
            id:this.form.id,
            level: this.form.level
          }
          timeDraw(params).then(()=>{
            this.$message.success('设置成功')
            this.handleCloseOpen()
          })
        }
        
      })
    },

    handleCommand(command) {
      console.log(command);
    },

    handleFabu() {
      this.dialogVisible = true;
    },

    handleClose() {
      this.dialogVisible = false;
    },

    handleLog(row) {
      this.rowId = row.id;
      this.dialoglogVisible = true;
    },

    handleLogClose() {
      this.dialoglogVisible = false;
    },

    // 预览
    handleDetail(row) {
      this.rowId = row.id;
      this.dialogView = true;
    },

    handleViewClose() {
      this.dialogView = false;
    },

    handleOpenTime(row) {
      this.rowId = row.id;
      this.timeopen = true;
    },

    handleCloseTime() {
      this.timeopen = false;
    },

    // 删除
    handleDetele(row) {
      this.$confirm("确定删除该条的数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          btnDelete({
            id: row.id,
          }).then(() => {
            this.$modal.msgSuccess("删除成功");
            this.getList();
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.iconbox {
  width: 32px;
  height: 26px;
}
.imgmini {
  width: 40px;
  height: 40px;
  margin: auto;
}
.imgbox {
  width: 120px;
  height: 120px;
}
</style>
